<template>
    <div class="swiper-container" ref="swiper">
        <!-- 图片部分 -->
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in images" :key="index">
                <img :src="item.imgUrl" />
            </div>
            
        </div>
        <!-- 分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</template>

<script>
// npm i swiper@5
// 引入swiper js和css
import Swiper from "swiper"
import "swiper/css/swiper.min.css"
export default {
    name:"Carousel",
    data(){
        return {
            isShow:false
        }
    },
    props:{
        images:{
            type:Array,
            default:() => []
        }
    },
    watch:{
        images:{
            immediate:true,
            handler(images){
                this.$nextTick(()=>{
                //判断images是否有数据，没有就返回
                if(!images.length || this.isShow ) return
                this.isShow = true //一个开关，有了数据之后就关上，保证后面的new Swiper只执行一次(这是因为用了vuex来管理数据)
                // new Swiper必须要等DOM生成
                console.log(111);
                const mySwiper =new Swiper(this.$refs.swiper, {
                //左右箭头
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                //小圆点
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                //自动播放
                autoplay: {
                    delay: 2000, //间隔时间
                    disableOnInteraction: false, //用户操作swiper之后，是否禁止autoplay。默认为true：停止。
                    // pauseOnMouseEnter:true, //鼠标置于swiper时暂停自动切换 6.x.x以上版本才能使用 
                    },
                //无缝轮播
                loop:true
                });
                mySwiper.el.onmouseenter = function (){
                    mySwiper.autoplay.stop()
                }
                mySwiper.el.onmouseleave = function (){
                    mySwiper.autoplay.start()
                }
            })
            }
        }

    
    },
    mounted(){
        
    }
}
</script>

<style>

</style>